<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>User</title>
    <style>
        table{
            text-align: center;
        }
        div{
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div align="center">
        <input type="text" name="name" id="name" placeholder="昵称"> <button onclick="selectUser()">查询</button>
    </div>
    <div align="center">
        <form action="/changeSex" method="post">
            <table border="1px">
                <thead>
                    <tr>
                        <th><input type="checkbox" id="checkAll" onclick="selectAll()">全选</th>
                        <th>ID</th>
                        <th>名称</th>
                        <th>性别</th>
                        <th>年龄</th>
                        <th>身高</th>
                        <th>体重</th>
                        <th>电话</th>
                    </tr>
                </thead>
                <tbody id="tbody">
                </tbody>
            </table>
            <div align="center">
                <span>修改性别</span>
                <select name="sex">
                    <option value="男">男</option>
                    <option value="女">女</option>
                </select>
                <button type="submit">修改</button>
            </div>
        </form>
    </div>
    <script>

        window.onload = function () {
            var xhr = new XMLHttpRequest();

            xhr.open("POST","/users");

            xhr.onreadystatechange =  function () {

                if (xhr.status == 200 && xhr.readyState == 4){
                    show(xhr.responseText);
                }
            }

            xhr.send();
        }

        function show(usersStr) {
            let users = JSON.parse(usersStr);

            let body = document.getElementById("tbody");
            body.innerHTML = "";

            for (let i = 0; i < users.length; i++) {
                let tr = document.createElement("tr");

                let checker = document.createElement("td");
                let check = document.createElement("input");
                check.type = "checkbox";
                check.name = "id";
                check.value = users[i].id;
                checker.appendChild(check);
                tr.appendChild(checker);

                let userId = document.createElement("td");
                userId.innerHTML = users[i].id;
                tr.appendChild(userId);

                let name = document.createElement("td");
                name.innerHTML = users[i].name;
                tr.appendChild(name);

                let sex = document.createElement("td");
                sex.innerHTML = users[i].sex;
                tr.appendChild(sex);

                let age = document.createElement("td");
                age.innerHTML = users[i].age;
                tr.appendChild(age);

                let height = document.createElement("td");
                height.innerHTML = users[i].height + "<small>M</small>";
                tr.appendChild(height);

                let weight = document.createElement("td");
                weight.innerHTML = users[i].weight + "<small>kg</small>";
                tr.appendChild(weight);

                let phoneNum = document.createElement("td");
                phoneNum.innerHTML = users[i].phoneNum;
                tr.appendChild(phoneNum);
                body.appendChild(tr);
            }
        }

        function selectUser() {
            let inputVar = document.getElementById("name").value;

            var xhr = new XMLHttpRequest();
            xhr.open("POST","select");
            xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset-UTF-8");
            xhr.onreadystatechange = function () {
                if (xhr.status == 200 && xhr.readyState == 4){
                    show(xhr.responseText);
                }
            }
            xhr.send("name="+inputVar);
        }

        function selectAll(){
            let checked = document.getElementById("checkAll").checked;
            if (checked){
                let checkBox = document.getElementsByName("id");
                for (let i = 0; i < checkBox.length; i++){
                    checkBox[i].checked = true;
                }
            }else{
                let checkBox = document.getElementsByName("id");
                for (let i = 0; i < checkBox.length; i++){
                    checkBox[i].checked = false;
                }
            }
        }

    </script>
</body>
</html>